<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      class Test extends React.PureComponent {
        constructor(props) {
          super(props);
        }

        componentDidUpdate () {
          console.log(`test update`);
        }

        render () {
          return <p>{ this.props.opacity }</p>
        }
      }
      class Hello extends React.Component {
        constructor(props) {
          super(props);
          this.state = { opacity: 1.0 };
        }

        componentDidMount() {
          this.timer = setInterval(
            function () {
              var opacity = this.state.opacity;
              opacity -= 0.05;
              if (opacity < 0.1) {
                opacity = 1.0;
              }
              this.setState({
                opacity: opacity,
              });
            }.bind(this),
            100
          );
        }

        render() {
          return (
            <div style={{ opacity: this.state.opacity }}>
              <Test opacity={'你好'} />
              <Test opacity={this.state.opacity} />
              Hello {this.props.name}
            </div>
          );
        }
      }

      ReactDOM.render(<Hello name="world" />, document.querySelector('#app'));
    </script>
  </body>
</html>
